Skip to content

[webview_flutter_android] Adds opt out of displayCutout and systemBars Android inset changes#11192

Open
bparrishMines wants to merge 23 commits intoflutter:mainfrom
bparrishMines:webview_safe_area
Open

[webview_flutter_android] Adds opt out of displayCutout and systemBars Android inset changes#11192
bparrishMines wants to merge 23 commits intoflutter:mainfrom
bparrishMines:webview_safe_area

Conversation

@bparrishMines
Copy link
Contributor

@bparrishMines bparrishMines commented Mar 6, 2026 •
edited
Loading

For WebView versions >=144, support has been added for displayCutout() insets and systemBars() insets. This is causing WebViews to incorrectly report that it is obscured by a system bar or display cutout as demonstrated in this issue.

This adds the opt out for inset changes as explained in this chromium doc. It seems Flutter handles safe areas for platform views, so the WebView can zero out inset changes to the View.

iOS does something similar. And it also sets UIScrollView.contentInsetAdjustmentBehavior to Never. My assumption was that this was never done for Android, because WebViews didn't receive these inset changes until this version.

Code sample

main.dart in webview_flutter_android:

import 'package:flutter/material.dart';
import 'package:webview_flutter_platform_interface/webview_flutter_platform_interface.dart';

const String htmlPage = '''
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebView Test</title>
    <style>
        header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding-top: env(safe-area-inset-top);
            background-color: blue;
            color: #ffffff;
        }
        .content {
            padding-top: 72px;
        }
    </style>
</head>
<body>
<div class="container">
    <header><h1>Webview AppBar</h1></header>
    <div class="content">
        <p>This is some webview content</p>
    </div>
</div>
</body>
</html>
''';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final PlatformWebViewController _controller;

  @override
  void initState() {
    super.initState();

    _controller =
        PlatformWebViewController(
            const PlatformWebViewControllerCreationParams(),
          )
          ..setJavaScriptMode(JavaScriptMode.unrestricted)
          ..loadHtmlString(htmlPage);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.primary,
        toolbarHeight: 0,
      ),
      body: PlatformWebViewWidget(
        PlatformWebViewWidgetCreationParams(controller: _controller),
      ).build(context),
    );
  }
}
Screenshots
Before After
Screenshot_20260313_151847 Screenshot_20260313_151957

Fixes flutter/flutter#182208

Pre-Review Checklist

If you need help, consider asking for advice on the #hackers-new channel on Discord.

Note: The Flutter team is currently trialing the use of Gemini Code Assist for GitHub. Comments from the gemini-code-assist bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed.

Footnotes

  1. Regular contributors who have demonstrated familiarity with the repository guidelines only need to comment if the PR is not auto-exempted by repo tooling. ↩ ↩2

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@reidbaker reidbaker reidbaker left review comments

@stuartmorgan-g stuartmorgan-g Awaiting requested review from stuartmorgan-g

+1 more reviewer

@gemini-code-assist gemini-code-assist[bot] gemini-code-assist[bot] left review comments

Reviewers whose approvals may not affect merge requirements

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

CICD Run CI/CD p: webview_flutter platform-android

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

android webview M144 reporting insets despite not overlapping with system bars

2 participants

@bparrishMines @reidbaker